import styled from "styled-components";
import testIcon from "../../assets/testIconpng.png";
import { Divider, Pagination } from "antd";
const NavBar = styled.div`
  border-radius: 10px;
  padding: 30px;
  background-color: #fff;
  border: 1px solid #eee;
  -webkit-box-shadow: 0 10px 30px 0 rgba(0, 0, 0, 0.15);
  box-shadow: 0 10px 30px 0 rgba(0, 0, 0, 0.15);
  text-align: left;
`;
const NavBarItem = styled.span`
  padding: 0 11px;
  line-height: 40px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  border-radius: 10px;
  border: 1px solid #eee;
  background-color: #f9f9f9;
  color: #999;
  margin-right: 10px;
  cursor: pointer;
  &:hover {
    background-color: #fff;
    color: #333;
    border-color: #333;
  }
`;
const Content = styled.div`
  display: grid;
  grid-template-columns: repeat(4, 280px);
  grid-gap: 30px;
  grid-template-rows: 280px 250px;
  justify-content: center;
  margin-top: 30px;
  .appBox {
    position: relative;
    width: 280px;
    height: 250px;
    padding: 25px 30px;
    box-sizing: border-box;
    background: white;
    border-radius: 15px;
    box-shadow: 0 20px 30px 0 rgba(0, 0, 0, 0.15);
    cursor: pointer;
    img {
      width: 80px;
      height: 80px;
      margin-left: 10px;
    }
    .boxTitle {
      line-height: 1.5;
      height: 3.2em;
      font-size: 16px;
      overflow: hidden;
      padding: 0;
      margin: 0;
    }
    .version {
      color: #666;
      font-size: 12px;
      margin: 10px 0 12px;
    }
    .info {
      font-size: 12px;
      color: #999;
    }
    .mask {
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      background: rgba(0, 0, 0, 0);
      border-radius: 15px;
    }
  }
`;
const Footer = styled.div`
  margin-top: 40px;
`;
const lastestBox = new Array(8).fill(1);
export default function AppPage() {
  return (
    <div className="appPage">
      <NavBar>
        <NavBarItem>全部</NavBarItem>
        <NavBarItem>软件</NavBarItem>
        <NavBarItem>游戏</NavBarItem>
        <Divider />
        <NavBarItem>全部</NavBarItem>
        <NavBarItem>软件</NavBarItem>
        <NavBarItem>游戏</NavBarItem>
      </NavBar>
      <Content>
        {lastestBox.map((item, index) => {
          return (
            <div
              className={"appBox"}
              key={index}
              onMouseMove={(e) => {
                handleMouseMove(e, index);
              }}
              onMouseOut={(e) => {
                handleMouseOut(e);
              }}
            >
              <img src={testIcon} alt="" />
              <div className="detail">
                <p className="boxTitle">
                  OmniFocus Pro 4 for mac(最佳GTD时间效率工具)
                </p>
                <p className="version">v4.5.1正式激活版</p>
                <p className="info">
                  <span>38.9 MB</span>
                  <span> | </span>
                  <span>2024-12-23</span>
                </p>
              </div>
              <div className="mask"></div>
            </div>
          );
        })}
      </Content>
      <Footer>
        <Pagination defaultCurrent={6} total={500} align="center" />;
      </Footer>
    </div>
  );
}
